<template>
    <div id="userinfo">
        <header-navbar></header-navbar>
        <div class="content">
            <div class="container">
                <div class="guanggao">
                    1200*120  广告
                </div>
                <!-- 1 -->
                <div class="user">
                    <div class="left">
                        <el-collapse v-model="activeNames" @change="handleChange">
                            <el-collapse-item title="课程中心" name="1">
                                <div class="classtitle" :class="{'active': act == 1}" @click="getClass">
                                    <i class="el-icon-video-play"></i>
                                    <span class="title" >我的课程</span>
                                </div>
                                <div class="classtitle" :class="{'active': act == 2}" >
                                    <i class="el-icon-date"></i>
                                    <span class="title">章节列表</span>
                                </div>
                                <div class="classtitle" :class="{'active': act == 3}" @click="act = 3">
                                    <i class="el-icon-chat-line-round"></i>
                                    <span class="title">消息中心</span>
                                </div>
                                <div class="classtitle" :class="{'active': act == 4}" @click="act = 4">
                                    <i class="el-icon-coordinate"></i>
                                    <span class="title">个人中心</span>
                                </div>
                            </el-collapse-item>
                            
                        </el-collapse>
                    </div>
                    <!-- 2 -->
                    <div class="right">
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import HeaderNavbar from "../components/index/HeaderNavbar"
    export default {
        components: {
            HeaderNavbar,
        },
        data() {
            return {
                activeNames: ["1"],
                act: "",
            }
        },
        computed: {
            token() {
                return localStorage.token;
            }
        },
        mounted () {
            this.isLogin();
        },
        methods: {
            // 判断是否登录
            isLogin() {
                if (!this.token) {
                    this.$message.success("请先登录")
                    this.$router.push("/login")
                }
            },
            handleChange( e ) {
                console.log(e);
                
            },
            // 获取课程
            getClass() {
                this.act = 1
                this.$router.push("/userinfo/myclass")
            },
            getZhang() {
                this.act = 2
                this.$router.push("/userinfo/zhanglist")
            },
        },
    }
</script>

<style lang="scss" scoped>
#userinfo {
    width: 100%;
    box-sizing: border-box;
    .content {
        width: 100%;
        box-sizing: border-box;
        .container {
            width: 1200px;
            box-sizing: border-box;
            margin: 0 auto;
            .guanggao {
                width: 100%;
                height: 120px;
                border: 1px solid #f2f2f2;
                margin: 20px 0;
            }
            .user {
                width: 1200px;
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                
                .left {
                    width: 300px;
                    box-sizing: border-box;
                    border: 1px solid #aaa;
                    .classtitle {
                        width: 100%;
                        box-sizing: border-box;
                        padding-left: 20px;
                        font-size: 16px;
                        height: 40px;
                        line-height: 40px;
                        cursor: pointer;
                        .title {
                            margin-left: 10px;
                        }
                    }
                    .active {
                        background-color: pink;
                    }
                }
                .right {
                    width: 800px;
                    box-sizing: border-box;
                    border: 1px solid #aaa;
                }
            }
        }
    }
}

</style>

<style >
.el-collapse-item__header {
    font-size: 24px !important;
    height: 60px;
    line-height: 60px;
    background-color: red;
    color: #fff;
    padding-left: 20px;
}
</style>